<template>
  <div>
    <div class="main">
      <eagle-input
        name="calendar"
        v-model="form.LSCCode"
        label="有限空间编号："
        placeholder="请输入有限空间编号："
   
        isInputText
       
      >
      </eagle-input>
      <eagle-input
        name="calendar"
        v-model="form.Name"
        label="有限空间名称："
        placeholder="请输入有限空间名称："
        required
        isInputText
      >
      </eagle-input>
      <eagle-input
        name="calendar"
        v-model="form.Position"
        label="有限空间位置："
        placeholder="请输入有限空间位置"
        required
        isInputText
      >
      </eagle-input>
      <eagle-input
        name="CheckTypeName"
        label="责任人"
        v-model="form.ResponsibleChnName"
        placeholder="请选择责任人"
      >
        <div
        @click="userChooseDialogShow = true"
          slot="gg"
          style="
            margin-left: 130px;
            font-size: 14px;
            display: inline;
            color: #1296db;
          "
        >
          <img
            src="@/assets/Images/AppIcon/icon_danger_select.png"
            alt=""
            style="height: 15px; width: 15px"
          />
          选择人员
        </div>
      </eagle-input>
      <eagle-input
        name="CheckTypeName"
        label="所属部门"
        v-model="form.ResponsibleDeptName"
        placeholder="请选择所属部门"
      >
      <div
        @click="deptmentShow = true"
          slot="gg"
          style="
            margin-left: 130px;
            font-size: 14px;
            display: inline;
            color: #1296db;
          "
        >
          <img
            src="@/assets/Images/AppIcon/icon_danger_select.png"
            alt=""
            style="height: 15px; width: 15px"
          />
          选择部门
        </div></eagle-input>
      <eagle-input
        name="CheckTypeName"
        label="识别人"
        v-model="form.DiscernChnName"
        placeholder="请选择是别人"
      >
      <div
        @click="userChooseDialogShow2 = true"
          slot="gg"
          style="
            margin-left: 130px;
            font-size: 14px;
            display: inline;
            color: #1296db;
          "
        >
          <img
            src="@/assets/Images/AppIcon/icon_danger_select.png"
            alt=""
            style="height: 15px; width: 15px"
          />
          选择人员
        </div>
    </eagle-input>
      <eagle-date
        label="识别日期"
        :date.sync="form.DiscernDate"
      ></eagle-date>
      <eagle-input
        name="CheckTypeName"
        label="有限空间类型"
        v-model="form.LimitedSpaceTypeName"
        required
        :islink="true"
        readonly
        @click="LimitedSpaceTypeShow=true"
        placeholder="请选择有限空间类型"
      ></eagle-input>
      <eagle-checkgroup
        v-model="HazardFactor"
        :dataSource="form.HazardFactorList"
        label="危害因素"
        direction="horizontal"
        class="input_text"
        required
        @change="HazardFactorChange"
      ></eagle-checkgroup>

      <eagle-input
        name="calendar"
        v-model="form.Accident"
        label="事故及后果"
        placeholder="请输入事故及后果"
        type="textarea"
        isInputText
      >
      </eagle-input>
      <eagle-input
        name="calendar"
        v-model="form.Protection"
        label="防护要求"
        placeholder="请输入防护要求"
        type="textarea"
        isInputText
      />
      <eagle-input
        name="calendar"
        v-model="form.OpSubject"
        label="作业主体"
        placeholder="请输入作业主体"
        isInputText
      >
      </eagle-input>
      <eagle-input
        name="calendar"
        v-model="form.PlanName"
        label="警示标志"
        placeholder="请输入警示标志"
        isInputText
      >
        <eagle-image-uploader
          slot="input"
          :images.sync="form.WarningMark"
          class="m-10"
        ></eagle-image-uploader>
      </eagle-input>
      <eagle-input
        name="calendar"
        v-model="form.PlanName"
        label="现场图片"
        placeholder="请输入现场图片"
        isInputText
      >
        <eagle-image-uploader
          slot="input"
          :images.sync="form.ScenePicture"
          class="m-10"
        ></eagle-image-uploader>
      </eagle-input>
      <eagle-input
        name="calendar"
        v-model="form.Remarks"
        label="备注"
        placeholder="请输入备注"
        type="textarea"
        isInputText
      />
      <div class="bottom-btns">
        <eagle-button type="primary" class="submit-btn" @click="save()">
          保存
        </eagle-button>
      </div>
    </div>
    <!--检查类型-->
    <check-type-dialog
      v-model="LimitedSpaceTypeShow"
      :data="form"
      @close="closeCheckType"
    ></check-type-dialog>
      <!--检查人选择-->
      <user-choose-dialog
      title="选择检查人"
      :show.sync="userChooseDialogShow"
      @callback="userChooseCallback"
      :isMulti="false"
    >
    </user-choose-dialog>
         <!--检查人选择-->
         <user-choose-dialog
      title="选择检查人"
      :show.sync="userChooseDialogShow2"
      @callback="userChooseCallback2"
      :isMulti="false"
    >
    </user-choose-dialog>
    <!-- 部门 -->
    <deptment-choose
      :show.sync="deptmentShow"
      :selectedValue="UseOrgCode"
      @callback="_chooseDeptmentCb"
      ref="deptmentChoose"
    >
    </deptment-choose>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import UserChooseDialog from "@/views/components/user/userChooseDialog.vue";
import checkTypeDialog from "@/views/components/limitedSpace/checkTypeDialog.vue";
import DeptmentChoose from "@/views/components/department/departmentChooseDialog.vue";
export default {
  components: {
    UserChooseDialog,
    checkTypeDialog,
    DeptmentChoose,
  },
  data() {
    return {
      id: this.$route.query.id,
      userChooseDialogShow: false,
      userChooseDialogShow2: false,
      LimitedSpaceTypeShow:false,
      form: { Details: [] },
      show: false,
      plantypeShow: false,
      PlanTypeName: "",
      PlanType: "",
      sss: [
        { ID: "G", Name: "ddd" },
        { ID: "H", Name: "其它" },
      ],
      ChemistryProp2: "ss",
      Attachs: "",
      deptmentShow : false,
      UseOrgCode:'',
      HazardFactor:[],
      api:'/OperationLimitedSpace/Edit'
    };
  },

  computed: {
    ...mapGetters(["baseUrl", "CompanyCode", "roles"]),
  },

  created() {
    if (this.$route.query.id != null) {
      this.id = this.$route.query.id;
    
    }
    if (this.id == 0) {
      var d = new Date();
      this.form.Year = d.getFullYear().toString();
      this.getInitEntity();
      this.api='/OperationLimitedSpace/Add'
    } else {
      this.getDetail();
    }
  },
  methods: {
    _fileUploadCb(attachs) {
      this.form.Attachs = attachs;
    },
    getDetail() {
      let params = { id: this.id };
      this.$axios
        .get("/OperationLimitedSpace/GetDetail", {
          params: params,
        })
        .then((res) => {
          this.form = res.data;
          if(res.data.HazardFactor){
              this.HazardFactor=res.data.HazardFactor.split(",");
          }
        });
    },
    getInitEntity() {
      let params = { id: this.id };
      this.$axios
        .get("/OperationLimitedSpace/InitAppNewEntity", {
          params: params,
        })
        .then((res) => {
          this.form = res.data;
        });
    },
    // 选择检查类型
    closeCheckType(type) {
      console.log(type);
      if (type) {
          this.form.LimitedSpaceTypeList.forEach((item) => {
            if (item.ID == type) {
              this.form.LimitedSpaceTypeName = item.Name;
              this.form.LimitedSpaceType = type;
            }
          });
      }
      this.LimitedSpaceTypeShow = false;
    },

    save() {
      if (!this.form.Name) {
        return this.$toast("请输入有限空间名称");
      }

      if (!this.form.Position) {
        return this.$toast("请输入有限空间位置");
      }

      if (!this.form.LimitedSpaceTypeName) {
        return this.$toast("请选择有限空间类型");
      }
      if (!this.form.HazardFactor) {
        return this.$toast("请选择危害因素");
      }
      

      this.$axios.post(this.api, this.form).then((res) => {
        this.$toast.success("保存成功");
        setTimeout(() => {
          this.$router.goRefresh(-1);
        }, 300);
      });
    },
    userChooseCallback(userlist) {
    userlist?this.form.ResponsibleChnName=userlist.ChnName:
    this.userChooseDialogShow = false;
    },
    //责任人
    userChooseCallback2(userlist) {
    userlist?this.form.DiscernChnName=userlist.ChnName:
    this.userChooseDialogShow2 = false;
    },
    //待Fix
    _chooseDeptmentCb(data) {
      console.log(data)
      // 部门
      // if (data) {
      //   let UseOrgCode = [];
      //   let UseOrgName = [];
      //   data.forEach((item) => {
      //     UseOrgName.push(item.name);
      //     UseOrgCode.push(item.code);
      //   });
      //   this.data.UseOrgName = UseOrgName.join(",");
      //   this.data.UseOrgCode = UseOrgCode.join(",");
      // }
      this.deptmentShow = false;
    },
    HazardFactorChange() {
    
      this.form.HazardFactor = this.HazardFactor.join();
    },
  },
};
</script>

<style lang="less" >
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
</style>
<style lang="less" scoped>
.space-between {
  justify-content: space-between;
}
.bottom-btns {
  margin-top: 10px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .submit-btn {
    width: 100%;
    height: 35px;
    font-size: 14px;
  }
}
.spec-right {
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
  .van-field {
    width: 100px;
  }
  .van-field__control {
    border-bottom: 1px solid;
    background-color: #fff;
  }
  .input-line {
    width: 60px;
    height: 20px;
    border: none;
    border-bottom: 1px solid;
    padding: 0 5px;
    box-sizing: border-box;
    text-align: center;
  }
}
</style>
